<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script th:src="@{../static/js/axios.js}"></script>
    <script th:src="@{../static/js/vue.js}"></script>
    <script th:src="@{../static/elementui/index.js}"></script>
    <link rel="stylesheet" th:href="@{../static/elementui/index.css}">
</head>
<body>
<div id="app">
    <el-form :inline="true" :model="page.queryString" class="demo-form-inline">
        <el-form-item label="商品名称">
            <el-input v-model="page.queryString.name" placeholder="商品名称"></el-input>
        </el-form-item>
        <el-form-item label="商品状态" prop="region">
            <el-select v-model="page.queryString.status" placeholder="请选择">
                <el-option label="停用" :value=0></el-option>
                <el-option label="启用" :value=1></el-option>
                <el-option label="发布" :value=2></el-option>
                <el-option label="待审核" :value=3></el-option>
                <el-option label="审核通过" :value=4></el-option>
                <el-option label="审核不通过" :value=5></el-option>
                <el-option label="上架" :value=6></el-option>
                <el-option label="下架" :value=7></el-option>
            </el-select>
        </el-form-item>
        <el-form-item>
            <el-button type="primary" @click="initData(page.currentPage=1)">查询</el-button>
        </el-form-item>
    </el-form>
    <el-button type="primary" @click="handleAdd()" th:if="${user.roleId==2}">添加</el-button>
    <el-table
            :data="tableData"
            style="width: 100%">
        <el-table-column
                prop="id"
                label="ID">
        </el-table-column>
        <el-table-column
                prop="name"
                label="名称">
        </el-table-column>
        <el-table-column
                prop="address"
                label="产地">
        </el-table-column>
        <el-table-column
                prop="usefulTime"
                label="有效期">
        </el-table-column>
        <el-table-column
                prop="spec"
                label="规格">
        </el-table-column>
        <el-table-column
                prop="sale"
                label="商品价格">
        </el-table-column>
        <el-table-column
                prop="price"
                label="售价">
        </el-table-column>
        <el-table-column
                prop="status"
                label="状态">
            <template slot-scope="scope">
                <el-tag v-if="scope.row.status==0" type="info">停用</el-tag>
                <el-tag v-if="scope.row.status==1" type="success">启用</el-tag>
                <el-tag v-if="scope.row.status==2" type="success">发布</el-tag>
                <el-tag v-if="scope.row.status==3" type="warning">待审核</el-tag>
                <el-tag v-if="scope.row.status==4" type="success">审核通过</el-tag>
                <el-tag v-if="scope.row.status==5" type="danger">审核不通过</el-tag>
                <el-tag v-if="scope.row.status==6" type="success">上架</el-tag>
                <el-tag v-if="scope.row.status==7" type="info">下架</el-tag>
            </template>
        </el-table-column>
        <el-table-column
                prop="putReason"
                label="上架原因">
        </el-table-column>
        <el-table-column
                prop="outReason"
                label="下架原因">
        </el-table-column>
        <el-table-column label="操作">
            <template slot-scope="scope">
                <el-button v-if="scope.row.status==0 || scope.row.status==5 || scope.row.status==7"
                           size="mini"
                           @click="handleEdit(scope.row)">修改
                </el-button>
                <el-button v-if="scope.row.status==1"
                           size="mini"
                           type="info"
                           @click="handleStatus(scope.row,0)">停用
                </el-button>
                <el-button v-if="scope.row.status==0"
                           size="mini"
                           type="success"
                           @click="handleStatus(scope.row,1)">启用
                </el-button>
                <el-button v-if="scope.row.status==1"
                           size="mini"
                           type="success"
                           @click="handleStatus(scope.row,2)">发布
                </el-button>
                <el-button v-if="scope.row.status==2"
                           size="mini"
                           type="danger"
                           @click="handleStatus(scope.row,3)">请求审核
                </el-button>
                <el-button v-if="scope.row.status==3"
                           size="mini"
                           type="success"
                           @click="handleStatus(scope.row,4)">审核通过
                </el-button>
                <el-button v-if="scope.row.status==3"
                           size="mini"
                           type="danger"
                           @click="handleStatus(scope.row,5)">审核不通过
                </el-button>
                <el-button v-if="scope.row.status==4 || scope.row.status==7"
                           size="mini"
                           type="success"
                           @click="handleStatus(scope.row,6)">上架
                </el-button>
                <el-button v-if="scope.row.status==4 || scope.row.status==6"
                           size="mini"
                           type="danger"
                           @click="handleStatus(scope.row,7)">下架
                </el-button>
            </template>
        </el-table-column>
    </el-table>

    <!--分页-->
    <div class="block">
        <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="page.currentPage"
                :page-sizes="[2, 4, 6, 8]"
                :page-size="page.pageSize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="page.total">
        </el-pagination>
    </div>
    <!--添加-->
    <el-dialog :title="title" :visible.sync="dialogFormVisible">
        <el-form :model="formData" :inline="true">
            <el-form-item label="商品名称">
                <el-input v-model="formData.name" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="产地">
                <el-input v-model="formData.address" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="有效期">
                <el-input v-model="formData.usefulTime" type="date" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="规格">
                <el-input v-model="formData.spec" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="商品价格">
                <el-input v-model="formData.sale" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="售价">
                <el-input v-model="formData.price" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="状态">
                <div v-if="formData.id!=null">
                    <el-tag v-if="formData.status==0" type="info">停用</el-tag>
                    <el-tag v-if="formData.status==1" type="success">启用</el-tag>
                    <el-tag v-if="formData.status==2" type="success">发布</el-tag>
                    <el-tag v-if="formData.status==3" type="warning">待审核</el-tag>
                    <el-tag v-if="formData.status==4" type="success">审核通过</el-tag>
                    <el-tag v-if="formData.status==5" type="danger">审核不通过</el-tag>
                    <el-tag v-if="formData.status==6" type="info">上架</el-tag>
                    <el-tag v-if="formData.status==7" type="danger">下架</el-tag>
                </div>
                <div v-if="formData.id==null">
                    <el-select v-model="formData.status">
                        <el-option label="停用" :value=0></el-option>
                    </el-select>
                </div>
            </el-form-item>
            <el-form-item label="上架原因">
                <el-input v-model="formData.putReason" autocomplete="off" placeholder="暂无"></el-input>
            </el-form-item>
            <el-form-item label="下架原因">
                <el-input v-model="formData.outReason" autocomplete="off" placeholder="暂无"></el-input>
            </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click="dialogFormVisible = false">取 消</el-button>
            <el-button type="primary" @click="save()">确 定</el-button>
        </div>
    </el-dialog>
</div>
<script th:inline="javascript">
    new Vue({
        el: '#app',
        data: {
            tableData: [],
            page: {
                currentPage: 1,
                pageSize: 10,
                total: 20,
                queryString: {}
            },
            title: '',
            dialogFormVisible: false,
            formData: {},
            user:[[${user}]]
        },
        methods: {
            initData() {
                axios.post("/goods/findPage", this.page).then(res => {
                    this.tableData = res.data.rows;
                    this.page.total = res.data.total;
                })
            },
            handleDelete(row) {
                this.$confirm("是否删除", "提示", {type: 'warning'}).then(res => {
                    axios.post("/goods/delete?id=" + row.id).then(res => {
                        if (res.data.code == 0) {
                            this.$message({
                                message: res.data.message,
                                type: 'success'
                            })
                            this.initData();
                        } else {
                            this.$message.error(res.data.message)
                        }
                    })
                }).catch(() => {
                    this.$message({
                        message: '取消操作',
                        type: 'info'
                    })
                })

            },
            handleStatus(row,status) {
                this.$confirm("是否修改", "提示", {type: 'warning'}).then(res => {
                    axios.post(`/goods/updateStatus?id=${row.id}&status=${status}`).then(res => {
                        if (res.data.code == 0) {
                            this.$message({
                                message: res.data.message,
                                type: 'success'
                            })
                            this.initData();
                        } else {
                            this.$message.error(res.data.message)
                        }
                    })
                }).catch(() => {
                    this.$message({
                        message: '取消操作',
                        type: 'info'
                    })
                })

            },
            handleEdit(row) {
                this.title = '编辑信息';
                this.dialogFormVisible = true;
                this.formData = row;
            },
            handleAdd() {
                this.title = '添加信息';
                this.dialogFormVisible = true;
                this.formData = {};
            },
            save() {
                axios.post(`/goods/${this.formData.id==null?'add':'update'}`, this.formData).then(res => {
                    if (res.data.code == 0) {
                        this.$message({
                            message: res.data.message,
                            type: 'success'
                        })
                        this.initData();
                        this.dialogFormVisible = false;
                    } else {
                        this.$message.error(res.data.message)
                    }
                })
            },
            handleSizeChange(pageSize) {
                this.page.pageSize = pageSize;
                this.initData()
            },
            handleCurrentChange(currentPage) {
                this.page.currentPage = currentPage;
                this.initData()
            }
        },
        created() {
            this.initData();
        }
    })
</script>
</body>
</html>